<template>
  <div style="width: 100%; height: 100%;" >
    <!-- 横向分布 justify-content:flex-start-->
    <!-- 纵向居中align-items:center -->
    <div style="z-index: 2;display: flex;justify-content: flex-start;
			background-color: rgb(243, 244, 246);
			height: 11%;
			position: fixed;top: 0;left: 0;width: 100%;
			border-bottom:0.5px solid #c3b2bb;align-items: center; ">
      <div style="font-size: 20px;margin-left: 0px;height: 11vh;
			text-align: center;width: 100px;line-height: 11vh;
			cursor: pointer;" @click="gotoHome()">Aria
      </div>
      <form
          style="display: flex;align-items: center;margin-left: 17vw;height: 11vh;display: flex;justify-content: flex-start;">
        <div class="inputBox">
          <input id="inputtop" type="text" placeholder="">
        </div>
        <span style="width: 10px;"></span>
        <div class="inputBox">
          <input type="submit" value="检索">
        </div>
      </form>
      <span style="width: 20%;"></span>
      <div style="height: 11vh;align-items: center;line-height: 11vh;">{{ this.$store.state.borderflag }}</div>
      <span style="width: 5%;"></span>
      <div style="line-height: 11vh;">欢迎，xxx</div>
      <button class="logout" style="height: 40px;position: absolute;right:30px;">退出登录</button>
    </div>
    <div class="shell" style="top: 8%;z-index: 1;position: fixed;left:0" @mouseover="changeflag(true)"
         @mouseout="changeflag(false)">
      <a class="box"><span></span></a>
      <a style="cursor: pointer;" class="box" @click="gotoMsg()"><i
          class="el-icon-user-solid"></i><span>个人信息</span></a>
      <a style="cursor: pointer;" class="box" @click="gotoColl()"><i
          class="el-icon-star-on"></i><span>关注/收藏</span></a>
      <a style="cursor: pointer;" class="box"><i class="el-icon-message-solid"></i><span>消息中心</span></a>
      <a style="cursor: pointer;" class="box"><i class="el-icon-s-platform"></i><span>最近浏览</span></a>
      <a style="cursor: pointer;" class="box"><i class="el-icon-s-flag"></i><span>门户系统</span></a>
    </div>
    <div style="
    border-style:none;height:89%; width: 93%;
    overflow: auto;
    zoom: 1;
    position: absolute;
    margin-top: 4.7%;"
         :class="{onleft:this.$store.state.divflag,onright:!this.$store.state.divflag}">
      <div>
        <img class="thumb" style="position: relative;
  left: 10vw; top: 17vh;width: 13%; height: 13%;"
             src="../assets/用户头像.jpg">
        <div v-if="is_subscribed === false">
          <button type="button" class="button" style="position: relative;font-size: 1vw;
    left: 28vw; top: -3vh;width: 8vw; height: 7vh;" @click="subscribe()">订阅 +
          </button>
        </div>
        <div v-else>
          <button type="button" class="button" style="position: relative;
    left: 28vw; top: -3vh;width: 7vw; height: 7vh;" @click="subscribe()">取消订阅
          </button>
        </div>
        <div v-if="certified === 0">
          <button type="button" class="button" style="position: relative;font-size: 1vw;
  left: 40vw; top: -10vh;width: 10vw; height: 7vh;">
            <i class="el-icon-s-order" @click="dialogVisible = true">我要认证</i>
          </button>
        </div>
        <div v-else>
          <button type="button" class="button" style="position: relative;
  left: 40vw; top: -10vh;width: 10vw; height: 7vh;" disabled="true">
            <i class="el-icon-s-claim">已认证</i>
          </button>
        </div>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
          <el-input placeholder="请输入认证码" v-model="code_input" clearable></el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="certify()">确 定</el-button>
          </span>
        </el-dialog>
        <div style="position: relative; font-size: 1.3vw;
        left: 28vw; top: 0vh;border: none;width: 15vw; height: 7vh">Scolar ID:{{ ScolarID }}
        </div>
        <div style="position: relative;
  left: 1vw; top: 5vh; width: 50vw; height: 1vh">
          <el-divider></el-divider>
        </div>

        <div style="position: relative;
  left: 7vw; top: 7vh;border: none;width: 45vw; height: 40vh">
          <div style="position: relative;
  left: 4vw; top: 1vh;font-size: 2vw">{{ name }}
          </div>
          <div style="position: relative;
  left: 4vw; top: 5vh;font-size: 1.4vw">{{ iden }}
          </div>
          <div style="position: relative;
        left: 1vw; top: 10vh;display: flex;justify-content: space-around">
            <div style="width: 6vw">
              <div style="font-size: 1.5vw;">被引频次</div>
              <div style="font-size: 2vw; font-weight: bold;
             text-align: center; margin-top: 3vh">{{ t_quote }}
              </div>
            </div>
            <div style="width: 5vw">
              <div style="font-size: 1.5vw;">成果数</div>
              <div style="font-size: 2vw; font-weight: bold;
             text-align: center; margin-top: 3vh">{{ t_ach }}
              </div>
            </div>
            <div style="width: 5vw">
              <div style="font-size: 1.5vw;">H指数</div>
              <div style="font-size: 2vw; font-weight: bold;
             text-align: center; margin-top: 3vh">{{ t_H }}
              </div>
            </div>
            <div style="width: 5vw">
              <div style="font-size: 1.5vw;">G指数</div>
              <div style="font-size: 2vw; font-weight: bold;
             text-align: center; margin-top: 3vh">{{ t_G }}
              </div>
            </div>
          </div>
        </div>

        <div style="position: relative;
  left: 57vw; top: -68vh;width: 26vw; height: 65vh">
          <div style="position: relative;
  left: 2vw; top: 0vh;text-align: center; font-size: 2vw;">
            关系网络
          </div>
          <relateChart :persons="PersonData" :linkOfPersons = "linkOfPers" :key="relatekey"/>
        </div>
        <div style="position: relative;
  left: 1vw; top: -60vh; width: 88vw; height: 1vh">
          <el-divider></el-divider>
        </div>
        <div style="position: relative;
  left: 8vw; top: -58vh;border: none;width: 50vw; height: 45vh">
          <div style="position: relative;
  left: 60px; top: 10px;font-size: 2vw">统计
          </div>
          <lineChart :title="v_title" :legend="v_legend" :xAxis="v_xAxis" :yAxis="v_yAxis" :series="v_series"/>
        </div>
        <div style="position: relative;
  left: 58vw; top:-103vh;border: none;width: 10vw; height: 70vh">
          <div style="position: relative;
  left: 1vw; top: 1vh; font-size: 2vw">
            合作学者
          </div>
          <!--wait to be continued-->
          <div v-for="(item,i) in linkOfCo">
            <div v-if = "item.target - 1 < PersonData.length">
                <div class="shadow" style="position: relative;
      left: 1vw; top: 3vh;border-style:outset;margin-bottom: 3vh; width: 23vw; height: 11vh">
                <img class="thumb" style="position: relative;
    left: 1vw; top: 1vh;width: 5vw; height: 5vw;" src="../assets/用户头像.jpeg">
                  <div style="position: relative;
      left: 9vw; top: -6.6vh;font-size: 1.8vw">{{ PersonData[item.target - 1].name }}
                  </div>
                </div>
            </div>
          </div>
        </div>
        <div style="position: relative;
  left: 1vw; top: -127vh; width: 56vw; height: 10px">
          <el-divider></el-divider>
        </div>
        <div style="position: relative;
  left: 13vw; top:-127vh; width: 50vw;">
          <select name="Year" @change="change_show_time($event)">
            <option value="All">全部年份</option>
            <option value="1">近1年</option>
            <option value="3">近3年</option>
            <option value="10">近10年</option>
          </select>
        </div>
        <div style="position: relative;
  left: 26vw; top:-129.5vh; width: 50vw;">
          <select name="Type" @change = "change_show_type($event)">
            <option value="TypeAll">全部类型</option>
            <option v-for = "(item,i) in selectTypeData" :key="i" :value="item">{{ item }}</option>
          </select>
        </div>
        <div style="position: relative;
  left: 39vw; top:-132vh; width: 50vw;">
          <select name="OrderWay" @change = "change_order($event)">
            <option value="1">按时间升序</option>
            <option value="2">按时间降序</option>
            <option value="3">按名称升序</option>
            <option value="4">按名称降序</option>
          </select>
        </div>
        <div style="position: relative;
  left: 1vw; top: -134vh; width: 56vw; height: 1vh">
          <el-divider></el-divider>
        </div>
        <!-- 文章列表 -->
        <div v-for="(item,i) in showing_Articles">
          <div class="shadow" style="position: relative;
    left: 10vw; top: -131vh;border-style:outset;margin-bottom: 3vh; width: 47vw; height: 31vh">
            <div style="position: relative;word-break: break-all;
  word-wrap: break-word;
    left: 4vw; top: 1vh;width: 90%;font-size: 1.7vw; color: #000000;"
                 @click = "jumpToArticle(item.id)"
                 @mouseover="changeColor($event, '#ff00ff')"
                 @mouseout="changeColor($event, '#000000')">
              {{ item.title }}
            </div>
            <div style="position: relative;word-break: break-all;
  word-wrap: break-word;
    left: 4vw; top: 2vh;width: 90%;font-size: 1vw">{{ item.year }} {{item.type}}
            </div>
            <div style="position: relative;word-break: break-all;
  word-wrap: break-word;
    left: 4vw; top: 3vh; width: 90%;font-size: 1vw">
              {{ item.inform }}
            </div>
            <!--<div style="position: relative;
    left: 1vw; top: 11vh; width: 90%; height: 1vh">
              <el-divider></el-divider>
            </div>-->
            <!--<button class="buttonCircleGreen" style="position: relative;
    left: 4vw; top: 11vh;"><div style="font-size: 0.5vw" @click="search_article(item.id)">查看
            </div></button>-->
            <!--
            <button class="buttonCircleGrey" style="position: relative;
    left: 140px; bottom: -90px;"><div style="font-size: 5px">引用
            </div></button>
            -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div style="width: 13%;background-color: #f1f2f5;height: 100%;float: left;cursor:pointer;position: fixed;top: 0;left: 0;">&nbsp;</div> -->

</template>

<script>
import relate from "../components/RelationChart";
import LineChart from "@/components/LineChart";

export default {
  name: "author",
  components: {
    "relateChart": relate,
    "lineChart": LineChart,
  },
  created(){
    this.getParams();
  },
  mounted() {
    this.getData();
    this.cope();
    this.is_subscribed_f();
  },
  data() {
    return {
      relatekey: 0,
      code_input: '',
      dialogVisible: false,
      is_subscribed: false,
      name: "吕云翔",
      ScolarID: 100000,
      iden: "北京航空航天大学教授",
      certified: 0,
      t_quote: 0,
      t_ach: 0,
      t_H: 99,
      t_G: 99,
      Articles:[
        {
          id: 0,
          title: "论文标题1",
          inform: "论文信息1",
          year: 2021,
          type: "文学",
          times: 10,
        },
        {
          id: 1,
          title: "论文标题2",
          inform: "论文信息2gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
          year: 2012,
          type: "科学",
          times: 20,
        },
      ],
      showing_Articles:[
        {
          id: 0,
          title: "论文标题1",
          inform: "论文信息1",
          year: 2021,
          date: "2021-12-20",
          type: "文学",
          times: 10,
        },
        {
          id: 2,
          title: "论文标题2",
          inform: "论文信息2ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbb",
          year: 2020,
          date: "2020-12-20",
          type: "科学",
          times: 20,
        },

      ],
      PersonData:[
        {
          name: "张1",
          symbolSize: 70,
          id: "1",
        },
        {
          name: "张2",
          id: "2",
        },
        {
          name: "张3",
          id: "3",
        },
        {
          name: "张4",
          id: "4",
        },
        {
          name: "张5",
          id: "5",
        },
        {
          name: "张6",
          id: "6",
        },
        {
          name: "张7",
          id: "7",
        },
        {
          name: "张8",
          id: "8",
        },
      ],
      linkOfPers:[
        { value: "合作", source: "1", target: "2" },
        { value: "同事", source: "1", target: "3" },
        { value: "同事", source: "1", target: "4" },
        { value: "合作", source: "1", target: "5" },
        { value: "同事", source: "1", target: "6" },
        { value: "同事", source: "1", target: "7" },
        { value: "合作", source: "1", target: "8" },
      ],
      //折线图
      v_title: {
        text: ''
      },
      v_legend: {
        data: ['文学', '科学']
      },
      v_xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['','成果数', '引用次数','']
        }
      ],
      v_yAxis: [
        {
          type: 'value'
        }
      ],
      v_series: [
        {
          name: '文学',
          type: 'bar',  //bar
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [0,1, 10]
        },
        {
          name: '科学',
          type: 'bar',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [0,2, 20]
        },
      ],
      selectTypeData:['文学', '科学'],
      linkOfCo:[

      ],
    }
  },
  methods: {
    gotoHome() {
      this.$router.push('/')
    },
    clickinput() { //onfocus
      document.getElementById("inputtop").placeHolder = "";
    },
    outinput() { //onblur
      document.getElementById("inputtop").placeHolder = "请输入内容"
    },
    gotoMsg() {
      this.$router.push('/personalpage/personmsg')
    },
    gotoColl() {
      this.$router.push('/personalpage/collect')
    },
    changeflag(flag) {
      if (flag === true) {
        this.$store.state.divflag = false;
      } else {
        this.$store.state.divflag = true;
      }
    },
    getParams() {
      // 取到路由带过来的参数
      const routerParams = this.$route.params.id;
      if (routerParams) this.ScolarID = routerParams;
      console.log(this.$route.params);
      // 将数据放在当前组件的数据内
      //this.mallInfo.searchMap.mallCode = routerParams;
      //this.keyupMallName()
    },
    getCookie(name) {
      var value = '; ' + document.cookie;
      var parts = value.split('; ' + name + '=');
      if (parts.length === 2) return parts.pop().split(';').shift();
    },
    getData(){
      const self = this;
      self.axios({
        method:'post',
        url:'/authorData/',
        data:{
          ScolarID: self.ScolarID,
          sort_type: 1
        },
        headers:{'X-CSRFToken':this.getCookie('csrftoken')},
      }).then(res => {
        var obj=JSON.parse(res.data)
        // load in data
        /*this.PersonData.splice(0,1,{
          name: "张1",
          symbolSize: 70,
          id: "1",
        })*/
        this.name = obj.name;
        this.iden = obj.iden;
        this.area = obj.area;
        this.certified = obj.certified;
        this.t_quote = obj.t_quote;
        this.t_ach = obj.t_ach;
        this.t_H = obj.t_H;
        this.t_G = obj.t_G;
        this.Articles = [];
        this.showing_Articles = [];
        for (let i = 0; i < obj.Articles.length; i++){
          let t = obj.Articles[i];
          if (t.inform.length > 50){
            t.inform = t.inform.substring(0, 50);
            t.inform = t.inform + "......";
          }
          this.Articles.splice(this.Articles.length, 0,t);
          this.showing_Articles.splice(this.showing_Articles.length, 0,t);
        }
        this.PersonData = [];
        this.PersonData.splice(0,0,{
          name: this.name,
          symbolSize: 70,
          id: "1",});
        for (let i = 0; i < obj.PersonData.length; i++){
          this.PersonData.splice(this.PersonData.length,0,{
            name: obj.PersonData[i].name,
            id: (i + 2).toString(),
          });
        }
        this.linkOfPers = [];
        for (let i = 0; i < obj.PersonData.length; i++) {
          this.linkOfPers.splice(this.linkOfPers.length,0,{
            value: obj.PersonData[i].relationship,
            source: "1",
            target: (i + 2).toString(),
          });
        }
        //确定类型种类
        this.selectTypeData = [];
        this.v_legend.data = [];
        for (let i = 0; i < this.Articles.length; i++){
          let is_find = false;
          for (let j = 0; j < this.selectTypeData.length; j++){
            if (this.selectTypeData[j] === this.Articles[i].type){
              is_find = true;
            }
          }
          if (!is_find){
            this.selectTypeData.splice(this.selectTypeData.length, 0, this.Articles[i].type);
            this.v_legend.data.splice(this.v_legend.data.length, 0, this.Articles[i].type);
          }
        }
        this.v_series = [];
        for (let i = 0; i < this.v_legend.data; i++){
          let cnt = 0,quote = 0;
          for (let j = 0; j < this.Articles.length; j++)
            if (this.v_legend.data[i] === this.Articles[j].type){
              cnt++;
              quote += this.Articles[j].times;
            }
          this.v_series.splice(this.v_series.length, 0, {
            name: this.v_legend.data[i],
            type: 'bar',  //bar
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [0, cnt, quote]
          });
        }
        this.relatekey = 1;
      }).catch( err => { console.log(err); })

    },
    cope(){
      this.linkOfCo = []
      for (let i = 0; i < this.linkOfPers.length; i++){
        if (this.linkOfPers[i].value === "合作"){
          this.linkOfCo.splice(this.linkOfCo.length, 0, this.linkOfPers[i]);
        }
      }
    },
    change_show_time:function(event){
      let t = 0;
      let date = new Date();
      let y = date.getFullYear();
      if (event.target.value === '1') t = 1;
      else if (event.target.value === '3') t = 3;
      else if (event.target.value === '10') t = 10;
      else t = 100000;
      this.showing_Articles = [];
      for (let i = 0; i < this.Articles.length; i++){
        if (y - t < this.Articles[i].year){
          this.showing_Articles.splice(this.showing_Articles.length, 0, this.Articles[i]);
        }
      }
    },
    change_show_type:function(event) {
      this.showing_Articles = [];
      for (let i = 0; i < this.Articles.length; i++){
        if (event.target.value === 'TypeAll' || this.Articles[i].type === event.target.value){
          this.showing_Articles.splice(this.showing_Articles.length, 0, this.Articles[i]);
        }
      }
    },
    change_order:function(event){
      const self = this;
      self.axios({
        method:'post',
        url:'/authorData/',
        data:{
          ScolarID: self.ScolarID,
          sort_type: parseInt(event.target.value)
        },
        headers:{'X-CSRFToken':this.getCookie('csrftoken')},
      }).then(res => {
        var obj=JSON.parse(res.data)
        // load in data
        this.showing_Articles = [];
        for (let i = 0; i < obj.Articles.length; i++){
          this.showing_Articles.splice(this.showing_Articles.length, 0,obj.Articles[i]);
        }
      }).catch( err => { console.log(err); })
    },
    certify:function(){
      console.log(this.code_input);
      let is_success = true;
      const self = this;
      self.axios({
        method:'post',
        url:'/authoridentify/',
        data:{
          IdentifyCode: this.code_input,
          id: this.ScolarID,
        },
        headers:{'X-CSRFToken':this.getCookie('csrftoken')},
      }).then(res => {
        var obj=JSON.parse(res.data)
        is_success = obj.is_success;
      }).catch( err => { console.log(err); })
      if (is_success){
        this.$message({
          message: '认证成功！',
          type: 'success'
        });
        this.dialogVisible = false;
        this.getData();
      }
      else {
        this.$message.error('认证码有误!');
      }
    },
    is_subscribed_f:function(){
      const self = this;
      self.axios({
        method:'post',
        url:'/issubscribe/',
        data:{
          id: this.ScolarID,
        },
        headers:{'X-CSRFToken':this.getCookie('csrftoken')},
      }).then(res => {
        var obj=JSON.parse(res.data)
        this.is_subscribed = obj.is_subscribed;
      }).catch( err => { console.log(err); })
    },
    subscribe:function(){
      const self = this;
      self.axios({
        method:'post',
        url:'/subscribe/',
        data:{
          id: this.ScolarID,
        },
        headers:{'X-CSRFToken':this.getCookie('csrftoken')},
      }).then(res => {
        var obj=JSON.parse(res.data)
        this.is_subscribed = obj.is_subscribed;
        if (this.is_subscribed){
          this.$message({
            message: '订阅成功！',
            type: 'success'
          });
        }
        else {
          this.$message({
            message: '取消订阅成功！',
            type: 'success'
          });
        }
      }).catch( err => { console.log(err); })
    },
    jumpToArticle:function(id){
      this.$router.push('/literature/' + id);
    },
    changeColor:function(event, co){
      event.target.style.color = co;
    },
    search_article:function(id){

    },
    delete_article:function(id){
      const self = this;
      self.axios({
        method:'post',
        url:'/deletearticle/',
        data:{
          id: id,
        },
        headers:{'X-CSRFToken':this.getCookie('csrftoken')},
      }).then(res => {
        var obj=JSON.parse(res.data)
        if (obj.is_success){
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
        }
        else {
          this.$message.error('删除失败!');
        }
      }).catch( err => { console.log(err); })
    }
  }
};
</script>

<style>

.shadow{
  box-shadow: 5px 5px 10px  #888888;
}

.sel01{display:inline-block;position:relative;z-index:2;font-size:1.6rem;height:3.6rem;line-height:3.6rem;width:8rem;flex:1;background:#fff;box-sizing:border-box;border-radius:.5rem;}
.sel01:before{content:"";position:absolute;width:0;height:0;border:.5rem solid transparent;
  border-top-color:#e92f26;top:50%;right:1rem;cursor:pointer;z-index:-2;margin-top:-0.25rem;}
.sel01 select{width:100%;border:none;height:3.6rem;background:transparent;background-image:none;-webkit-appearance:none;-moz-appearance:none;vertical-align:top;padding-left:1rem;}
.sel01 select:focus{outline:none;}

.buttonCircleGreen{
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  background-color: #9bea9d;
  width: 3vw;
  height: 3vw;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  border-radius: 100%;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.buttonCircleRed{
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  background-color: #e0495c;
  width: 3vw;
  height: 3vw;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  border-radius: 100%;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.buttonCircleGrey{
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  background-color: #9fb8d2;
  width: 40px;
  height: 40px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  border-radius: 100%;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.button {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: .5em 2em .55em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.button:hover {
  text-decoration: none;
}

.button:active {
  position: relative;
  top: 1px;
}

.onleft {
  margin-left: 6.5%;
  width: 93.5%
}

.onright {
  margin-left: 17%;
  width: 83%
}

.shell {
  position: absolute;
  left: 0;
  width: 6.5%;
  height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgb(17, 24, 39);
  border-top-left-radius: 0em;
  border-top-right-radius: 0em;
  border-bottom-right-radius: 1em;
  border-bottom-left-radius: 1em;
  transition: .3s;
  overflow: hidden;
}

.box {
  height: 1%;
  width: 85%;
}

.box {
  display: block;
  justify-content: center;
  align-items: center;
  height: 15%;
  width: 85%;
  margin: 9px;
  border-radius: 5px;
  position: relative;
  transition: .3s;
  color: rgb(160, 160, 175);
}

.box i {
  font-size: 30px;
  position: absolute;
  margin: 15px 0 0 20px;
  /* margin-left: 30%;
  margin-top: 30%; */
}

.box:nth-child(1) {
  height: 0px;
}

.box:nth-child(1)::after,
.box:nth-child(5)::before {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background-color: rgb(55, 65, 81);
  position: absolute;
  bottom: -10px;
}

.box span {
  position: relative;
  top: 30%;
  left: 40%;
  font-size: 15px;
  opacity: 0;
  transition: .1s;
}

.shell:hover {
  width: 17%;
}

.shell:hover .contain {
  margin-left: 200px;
}

.box:hover {
  background-color: rgb(55, 65, 81);
}

.shell:hover span {
  opacity: 1;
}

.box:hover {
  color: #fff;
}

.shell:nth-child(2) {
  background-color: rgb(243, 244, 246);
}

.shell:nth-child(2) .box:hover {
  background-color: rgb(209, 213, 219);
  color: rgb(135, 140, 241);
}

.shell:nth-child(2) .box {
  color: #000;
}

.shell:nth-child(3) {
  background-color: rgb(49, 46, 129);
}

.shell:nth-child(3) .box:hover {
  background-color: rgb(67, 56, 202);
}

.shell:nth-child(3) .box {
  color: rgb(140, 120, 240);
}

.inputBox input {
  width: 100%;
  padding: 10px 20px;
  background: rgba(91, 91, 91, 0.2);
  outline: none;
  border: none;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 16px;
  letter-spacing: 1px;
  color: #191919;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.inputBox input:nth-child(2) {
  justify-content: center;
  align-items: center;
}

.inputBox input::placeholder {
  color: #191919;
}

.inputBox input[type="submit"] {
  background: #fff;
  color: #666;
  width: 75px;

  /* margin-bottom: 20px; */
  font-weight: 600;
  cursor: pointer;
}

.logout {
  background: rgba(91, 91, 91, 0.2);
  outline: none;
  border: none;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 16px;
  letter-spacing: 1px;
  color: #191919;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  background: #fff;
  color: #666;
  width: 100px;
  /* margin-bottom: 20px; */
  font-weight: 600;
  cursor: pointer;
}
</style>
